<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>

    <template v-if="ok">
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template>

    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>

    <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address">
    </template>

    <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username" key="username-input">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" key="email-input">
    </template>

    <h1 v-show="ok">Hello!</h1>

    <li v-for="todo in todos" v-if="!todo.isComplete">
        {{ todo.text }}
    </li>

</div>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            ok: true,
            type: 'A',
            loginType: 'username',
            todos: [
                {
                    text: 'a',
                    isComplete: false
                },
                {
                    text: 'b',
                    isComplete: true
                },
                {
                    text: 'c',
                    isComplete: false
                }
            ]
        }
    });
</script>
